<!DOCTYPE html>
<html>

<head>
    <!-- 有一个父div，宽度是100%，父div下面有3个子div，等宽，平分父div宽度 -->
    <meta charset="utf-8">
    <title>-webkit-box测试</title>
    <style>
        .box {
            color: white;
            /*前景色，即字体颜色*/
            background-color: #f99;
            border: 1px solid #f99;
            /*边框：宽度、线型、颜色*/
            border-radius: 2px;
            /*从左上角开始，顺时针的四个角*/
            padding: 3px;
            /*内边距*/
            font-size: 14px;
            /*字体-大小*/

            box-shadow: 2px 2px 2px #f99;
            /*横向阴影，纵向阴影，模糊距离，阴影颜色*/
            box-shadow: 0px 3px rgba(0, 0, 0, 0.2);
            /*一个比较好看的阴影*/

            margin-bottom: 10px;
        }

        .box {
            display: -webkit-box;
            width: 400px;
            height: 500px;
            -webkit-box-align: center;
            -webkit-box-orient: horizontal;/*横排*/


        }

        .box span {
            width: 100px;
            background-color: aquamarine;
            height: 50px; 
            display: block;
        }
    </style>
</head>

<body>

    <div class="box">
        <span>1-1</span>
        <span>1-2</span>
    </div>
    <br/>


</body>

</html>
